<template>
  <div class="app-container">
    <div class="editor-title">
      <el-form :model="form" :rules="rules" ref="form" style="display: flex">
        <el-form-item label="Json名称" label-width="90px" prop="jsonName">
          <el-input
            :disabled="disabled"
            v-model="form.jsonName"
            clearable
            autocomplete="off"
            placeholder="请输入Json名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="JsonCode" label-width="100px" prop="jsonCode">
          <el-input
            :disabled="disabled"
            v-model="form.jsonCode"
            clearable
            autocomplete="off"
            placeholder="请输入JsonCode"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <vue-json-editor
      v-model="resultInfo"
      :showBtns="false"
      :mode="'code'"
      lang="zh"
      :expandedOnStart="false"
      @json-change="onJsonChange"
      @json-save="onJsonSave"
      @has-error="onError"
    />
    <br />
    <el-button
      type="primary"
      @click="checkJson('form')"
      v-if="type == 'amend' || type == ''"
      >确定</el-button
    >
    <el-button type="primary" @click="handleReturn" v-else>返回</el-button>
  </div>
</template>

<script>
import { getDataByCode } from "@/api/user";
import {
  insertJsonConfigData,
  updateJsonConfigData,
} from "@/api/configuration";
// 导入模块
import vueJsonEditor from "vue-json-editor";

export default {
  name: "configuration",
  // 注册组件
  components: { vueJsonEditor },
  data() {
    return {
      type: "",
      // json是否验证通过
      hasJsonFlag: true,
      // 修改禁用
      disabled: false,
      // form表单
      form: {
        jsonName: "",
        jsonCode: "",
      },
      // json数据
      resultInfo: null,
      // 表单检验
      rules: {
        jsonName: [
          { required: true, message: "请输入Json名称", trigger: "blur" },
        ],
        jsonCode: [
          { required: true, message: "请输入JsonCode", trigger: "blur" },
        ],
      },
    };
  },

  mounted() {
    if (!this.$route.query.id) return;
    // 获取code
    this.form.id = this.$route.query.id;
    this.type = this.$route.query.type;
    this.form.jsonName = this.$route.query.name;
    this.form.jsonCode = this.$route.query.code;
    this.disabled = true;
    this.getDetail();
  },

  methods: {
    // 详情数据
    getDetail() {
      getDataByCode({ code: this.form.jsonCode }).then((res) => {
        this.resultInfo = res.data[this.form.jsonCode];
      });
    },

    onJsonChange(value) {
      // 实时保存
      this.onJsonSave(value);
    },
    onJsonSave(value) {
      this.resultInfo = value;
      this.hasJsonFlag = true;
    },
    onError(value) {
      this.hasJsonFlag = false;
    },
    // 校验json
    checkJson(formName) {
      if (this.hasJsonFlag == false) {
        this.$message({
          message: "json格式错误",
          type: "error",
        });
        return false;
      } else {
        if (this.resultInfo) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.form.jsonData = JSON.stringify(this.resultInfo);
              if (this.$route.query.name) {
                updateJsonConfigData(this.form).then((res) => {
                  this.$message({
                    message: "修改成功",
                    type: "success",
                  });
                  this.$router.push({ path: "/configuration/index" });
                });
              } else {
                insertJsonConfigData(this.form).then((res) => {
                  this.$message({
                    message: "新增成功",
                    type: "success",
                  });
                  this.resetForm()
                });
              }
            } else {
              console.log("error submit!!");
              return false;
            }
          });
        } else {
          this.$message({
            message: "json格式错误",
            type: "error",
          });
        }
        return true;
      }
    },

    // 返回上一级
    handleReturn() {
      this.$router.back();
    },

    // 新增成功清楚数据
    resetForm() {
      if(this.form.jsonName) {
        this.form.jsonName = ''
      }
      if(this.form.jsonCode) {
        this.form.jsonCode = ''
      }
      if(this.resultInfo) {
        this.resultInfo = {}
      }
    }
  },
};
</script>

<style >
.jsoneditor-vue {
  height: 700px;
}
</style>
